<template>
	<page-meta :page-style="'overflow:'+(popShow?'hidden':'visible')"></page-meta>
	<headassy title="备件详细" :isSearch="false" :isTab="false"></headassy>
	<view class="spare-content" :style="'min-height: calc(100vh - ' + (parseInt(system.safeArea.top) + 44) + 'px)'">
		<!-- <u-sticky bgColor="#fff">
			<view class="">
				<u-navbar title="费用详情" :autoBack="false">
					<view class="u-nav-slot" slot="left">
						<u-icon name="arrow-left" size="30" @click="leftClick"></u-icon>
						<u-line direction="column" :hairline="false" length="32" margin="0 8px"></u-line>
						<u-icon name="home" size="42" style="color: #fff;" @click="rightClick"></u-icon>
					</view>
				</u-navbar>
			</view>
		</u-sticky> -->
		<view class="part" >
			<view class="top">
				<view class="u-flex-between top-s">
					<view class="left">
						申请编号：{{feeApply.applyNo ? feeApply.applyNo : ''}}
					</view>
					<view class="right u-flex">
						<view class="cus-green-tag">
							{{feeApply.applyStatus ? feeApply.applyStatus : ''}}
						</view>
					</view>
				</view>
				<view class="item">
					申请网点：{{feeApply.applicant ? feeApply.applicant : ''}}
				</view>
				<view class="item">
					申请时间：{{feeApply.applicationTime ? feeApply.applicationTime : ''}}
				</view>
				<view class="item">
					申请金额：{{feeApply.applyMoney ? feeApply.applyMoney : ''}}
				</view>
				<view class="item">
					审核金额：{{feeApply.checkMoney ? feeApply.checkMoney : ''}}
				</view>
				
			</view>
		</view>
		<!-- 明细 -->
		<view class="compon">
			<view class="container card">
				<view class="top u-flex-between">
					<view class="left">
						明细
					</view>
				</view>
				<view class="card-main" v-for="item in feeLists" :key="item.partName">
					<view class="item u-flex-between mb-10">
						<view class="left">
							费用名称：{{item.name ? item.name : ''}}
						</view>
						<view class="right cus-green-tag">
							{{item.checkResult ? item.checkResult : ''}}
						</view>
					</view>
					<view class="item u-flex-between mb-10">
						<view class="left u-flex text-orange">
							费用金额：¥ {{item.money ? item.money : ''}}
						</view>
					</view>
					<view class="item u-flex-between mb-10">
						数量：{{item.qty ? item.qty : ''}}
					</view>
					<view class="item u-flex-between mb-10">
						<view class="left">
							申请类型：{{applyType[item.applyType] ? applyType[item.applyType] : ''}}
						</view>
					</view>
					<view class="item u-flex-between ">
						<view class="left u-flex text-gray">
							备注：{{item.remark ? item.remark : ''}}
							<!-- <p class="text-orange">¥10</p> -->
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',					// 费用工单id
				custAccId: '',			// 商家id
				acId: '',				// 登录账号id
				
				feeApply: {},
				feeLists: [],
				applyType: ['其他','向客户收取','向服务商支付'], 
				
				popShow: false,			// 禁止穿透
				system: uni.getSystemInfoSync(),
			};
		},
		onLoad(e) {
			this.custAccId = uni.getStorageSync('custAccid');
			this.acId = uni.getStorageSync('acId');
			this.id = e.id;
			this.getPullRefresh();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getPullRefresh()
		},
		methods: {
			// 下拉刷新请求数据
			getPullRefresh(){
				console.clear()
				this.getMoneyDetail();
				uni.stopPullDownRefresh()
			},
			
			async getMoneyDetail() {
				const res = await uni.$api.work.getMoneyDetail(this.custAccId,this.acId,this.id);
				console.log('获取费用详情----', res);
				this.feeApply = res.data.feeApply;
				this.feeLists = res.data.feeLists;
			},
			
			
			
			
			leftClick(e){
				let pages = getCurrentPages();
				console.log('pages', pages)
				if(pages.length > 1){
					uni.navigateBack();
				}else{
					uni.switchTab({
						url: '/pages/index/index'
					});
				}
			},
			rightClick(e){
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
		},
	}
</script>

<style lang="scss">
	/deep/.u-navbar--fixed {
		position: static !important;
	}
	
	.spare-content {
		background-color: #f5f5f5;
		// height: 100vh;
		padding: 20rpx 20rpx 0;
	}

	.part {
		padding: 14px 16px;
		font-size: 14px;
		background: #fff;
		margin-bottom: 10rpx;

		.top {
			margin-bottom: 10rpx;
			
		}

		.top-s {
			padding-bottom: 14px;
			
			.left {
				font-weight: 700;
				font-size: 30rpx;
			}
		}
		
		.item {
			margin-bottom: 4rpx;
		}
	}

	.compon2 {
		padding: 0 16px;
		font-size: 14px;
		background-color: #fff;
		margin-bottom: 10rpx;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			border-bottom: solid 1px #f5f5f5;

			.left {
				position: relative;
				line-height: 100rpx;
			}

			.left::after {
				content: "";
				width: 32px;
				height: 3px;
				background: #fd7400;
				position: absolute;
				bottom: 0;
				left: 0;
			}
			
			.right {
				position: relative;
				line-height: 100rpx;
			}
		}

		.card-main {
			padding: 19px 17px 19px 0;
		}
	}

	.compon {
		padding: 0 16px;
		font-size: 14px;
		background-color: #fff;
		margin-bottom: 10rpx;

		.container.card {
			background-color: #fff;
		}

		.top {
			height: 100rpx;
			border-bottom: solid 1px #f5f5f5;

			.left {
				position: relative;
				line-height: 100rpx;
			}

			.left::after {
				content: "";
				width: 32px;
				height: 3px;
				background: #fd7400;
				position: absolute;
				bottom: 0;
				left: 0;
			}
		}

		.card-main {
			padding: 16px 0;

		}

	}
</style>